<template>
  <div class="body">
    <div class="login-form">
      <div class="close"> </div>
      <div class="head-info">
        <span>手机登陆</span>
        <label class="lbl-1"> </label>
        <label class="lbl-2"> </label>
        <label class="lbl-3"> </label>
      </div>
      <div class="clear"> </div>
      <div class="avtar">
        <img src="./images/avtar.png" />
      </div>
      <div id="form">
        <input
          class="number"
          type="text"
          placeholder="手机号码"
          v-model="phone"
        >
        <div class='wraper_codeInput'>
          <input
            class="codeInput"
            type="text"
            placeholder="验证码"
            v-model="msgcode"
          />
          <button
            :disabled="$data.disabled"
            @click="sendCode"
          >
            <span v-if="!disabled">发送验证码</span>
            <span v-if="disabled">{{countTime}}s</span>
          </button>
        </div>
      </div>
      <div class="signin">
        <button @click="register">
          手机登陆
        </button>
      </div>
    </div>
    <div class="copy-rights">
      <p>lmt 聊天软件</p>
    </div>
  </div>

</template>

<script>
import myalert from "../../utils/alert.js";
import { register, sendCode, initEvent } from "./service";
import { setLocal } from "../../utils/local";
const countTime = 60;
export default {
  name: "register",
  data() {
    return {
      phone: "",
      msgcode: "",
      disabled: false,
      countTime
    };
  },
  components: {},
  methods: {
    register() {
      if (!this.phone) {
        myalert.fail("phone不能为空");
        return false;
      }
      if (!this.msgcode) {
        myalert.fail("mgscode不能为空");
        return false;
      }
      var self = this;
      register({
        phone: $.trim(this.phone),
        msgcode: $.trim(this.msgcode)
      }).then(user => {
        setLocal("app.user", user);
        /* 开始全局监听 */
        initEvent().then(res => {
          self.$router.push("/");
        });
      });
    },
    sendCode() {
      if (!this.phone) {
        myalert.fail("phone不能为空");
        return false;
      }
      var self = this;
      if (!this.disabled) {
        sendCode(this.phone);
      }
      this.disabled = true;
      self.interval = setInterval(() => {
        self.countTime -= 1;
        if (self.countTime <= 0) {
          self.countTime = countTime;
          self.disabled = false;
          clearInterval(self.interval);
        }
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
@import "./css/style.css";

.body {
  height: 1000px;
  background: url(./images/bg1.jpg) no-repeat 0px 0px;
  padding-top: 20%;
}
#form {
  .number {
    width: 70%;
    padding: 1em 2em 1em 3em;
    color: #dd3e3e;
    font-size: 18px;
    outline: none;
    background: url(./images/phone.png) no-repeat 0px 15px;
    border: none;
    font-weight: 100;
    border-bottom: 1px solid#484856;
  }
  .wraper_codeInput {
    padding: 1em 2em 1em 3em;
    display: flex;
    .codeInput {
      width: 150px;
      padding-left: 3em;
      padding-top: 1em;
      padding-bottom: 1em;
      color: #dd3e3e;
      font-size: 18px;
      outline: none;
      background: url(./images/code.png) no-repeat 0px 15px;
      border: none;
      font-weight: 100;
      border-bottom: 1px solid#484856;
    }
    button {
      display: block;
      width: 500px;
      background: red;
      background: #ffff;
      border: none;
    }
  }
}
</style>

